<template>
  <div class="login-page">
    <van-nav-bar class="register"
    title="<账号注册"
/>
<van-form @submit="onSubmit" >
  <van-field class="user"
    v-model="username"
    name="用户名"
    placeholder="请输入用户名"
    :rules="[
    { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符'}
    ]"
  />
  <van-field class="user"
    v-model="password"
    type="密码"
    name="password"
    placeholder="请输入密码"
    :rules="[
    { pattern: /^\d{6}$/, message: '密码至少包含6个字符'}
    ]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" class="rbtn">注册</van-button>
  </div>
</van-form>
 <router-link class="link" to="/register">注册账号</router-link>
  </div>
</template>

<script>
export default {
  name: 'register-page',
  data () {
    return {
        username: '',
        password: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('values', values);
    }
    // { validator: valiFn, message: '密码至少包含6个字符'}
    // valiFn (val) {
    //   return /^\d{6}$/.tes    t(val)
    // }
  }
}
</script>

<style lang="less" scoped>
// .login-page{
//     height: 20px;
//     margin: 10px;
//     background-color:#0dbc79
// }
.link {
  color:gray;;
  font-size: 16px;
  padding-right: 20px;
  float: right;
}
// .van-nav-bar__title{
//     text-color: white !important;
// }
// 账号注册
.register{
    background-color:#0dbc79;
    font-size: 18px;
    height: 50px;
    color: white !important; 
}
// 注册按钮
.rbtn{
    font-size: 18px;
    height: 50px;
    border: 0px;
    border-radius: 0;
    background-color:#0dbc79
}
.user{
    height: 70px;
    line-height: 70px;
    font-size: 17px;
}
</style>
